/*
 * @Author: hwd
 * @Description:
 * @FilePath: \my-react-crm\src\views\auth\user\index.js
 */
import { Space, Spin, Table, Button, Popconfirm, message } from "antd";
import { PlusOutlined, ArrowLeftOutlined } from "@ant-design/icons";
import { useState, useEffect } from "react";
import { useHistory, useParams } from "react-router-dom";
import Edit from "./components/editOption";
import api_dic from "@/api/system/option";

const App = () => {
    const [loading, setLoading] = useState(false);
    const [ifShowEdit, setifShowEdit] = useState(false);
    const [data, setdata] = useState();
    const [option, setoption] = useState([]);
    const [vdata, setVdata] = useState("");
    const history = useHistory();
    const params = useParams();

    useEffect(() => {
        setLoading(true);
        getoption(); // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    //确认删除
    const deleteConfirm = async (e, record) => {
        const res = await api_dic.remove({ _id: params._id, vid: record._id, operateType: "values" });
        message.success(res.msg);
        getoption();
    };
    //列表加载
    const getoption = async () => {
        setLoading(true);
        api_dic
            .getoption({ _id: params._id })
            .then((res) => {
                setLoading(false);
                if (res.data.length > 0) {
                    setdata(res.data[0]);
                    setoption(res.data[0].values);
                }
            })
            .catch(() => {
                setLoading(false);
            });
    };
    //打开编辑
    const edit = (record) => {
        setVdata(record);
        setifShowEdit(true);
    };
    //返回上一页
    const goBack = () => {
        history.go(-1);
    };
    const columns = [
        { title: "label", dataIndex: "label", key: "label", align: "center" },
        { title: "value", dataIndex: "value", key: "value", align: "center" },
        { title: "备注", dataIndex: "remark", key: "remark", align: "center" },
        { title: "创建时间", dataIndex: "createTime", key: "createTime", align: "center" },
        { title: "修改时间", dataIndex: "updateTime", key: "updateTime", align: "center" },
        {
            title: "操作",
            width: 100,
            key: "action",
            align: "center",
            render: (_, record) => (
                <Space size="middle">
                    <Button
                        type="link"
                        onClick={() => {
                            edit(record);
                        }}>
                        编辑
                    </Button>
                    <Popconfirm title="你确定要删除吗？" onConfirm={(e) => deleteConfirm(e, record)} okText="确定" cancelText="取消">
                        <Button type="link">删除</Button>
                    </Popconfirm>
                </Space>
            ),
        },
    ];
    return (
        <>
            <div style={{ display: "flex", padding: "10px", marginBottom: "20px", boxSizing: "content-box", backgroundColor: "white", borderRadius: "5px" }}>
                <div style={{ marginRight: "60px" }}>字典名称： {data?.name}</div>
                <div style={{ marginRight: "60px" }}>字典类型： {data?.type}</div>
                <div style={{ marginRight: "60px" }}>备注： {data?.remark}</div>
                <div style={{ marginRight: "60px" }}>创建时间： {data?.createTime}</div>
            </div>

            <Button
                type="primary"
                onClick={() => {
                    edit();
                }}
                style={{ marginBottom: "10px", marginRight: "20px" }}>
                <PlusOutlined />
                添加字典
            </Button>
            <Button
                type="primary"
                onClick={() => {
                    goBack();
                }}
                style={{ marginBottom: "10px" }}>
                <ArrowLeftOutlined />
                返回
            </Button>
            <>
                {ifShowEdit ? (
                    <Edit
                        close={() => {
                            setifShowEdit(false);
                        }}
                        callback={getoption}
                        _id={params._id}
                        vdata={vdata}></Edit>
                ) : null}
            </>
            <Spin spinning={loading} delay={200}>
                <Table columns={columns} dataSource={option} rowKey={(record) => record._id} />
            </Spin>
        </>
    );
};

export default App;
